<template>
  <g-loading type="square" :spinning="loading">
    <div class="create-screen">
      <div class="top-bar">
        <div class="right-bar"></div>
        <div class="left-bar"></div>
          <router-link to="/case" class="return-btn"> 
          <span class="return-text">
            <n-icon class="return-icon">
              <IconBack />
            </n-icon>
            返回
          </span>
        </router-link>
      </div>
      <particles></particles>
      <div class="background-detail">
        <el-row>
          <el-col :span="11" ></el-col>
          <el-col :span="12" ><span class="cl-nd">【苍蓝祈愿】</span></el-col> 
          <el-col :span="1" ><span class="history-cardPool" @click="confirmHistoryCard(null)">历届卡池</span></el-col>
        </el-row>
        <el-row style="margin-top: 10px;padding: 10px;" class="card-up">
          <el-col :span="5" > 
              <div class="card_up" >
                  <!-- <img class="up-change" v-bind:class="{ selectdUpChange: isSelectdUpChange === pool.id}" :src='pool.cardUpUrl' @click="showUpPool(pool.id) "/> -->
                    <img v-for="(pool,key,index) in tableData" class="up-change" v-bind:class="{ selectdUpChange: isSelectdUpChange === pool.id}" :src='pool.cardUpUrl' @click="showUpPool(pool.id) "/> 

                    <!-- <div class="blur-container-up">
                      <div class="blur-img-up"></div>
                      <img class="up-change real-img-up" v-bind:class="{ selectdUpChange: isSelectdUpChange === pool.id}" :src='pool.cardUpUrl' @click="showUpPool(pool.id) "  :class="{ loaded: upCreateVisible }" />
                    </div> -->
              </div>
          </el-col>
          <el-col :span="14" > 
              <div class="pool_up">
                  <!-- <img v-show="poolVisible" class="pool_img" :src='cardPoolUrl' /> -->
                  <div v-show="poolVisible" class="blur-container">
                    <div class="blur-img"><img src="https://www.cljj.wiki/card/pool/loading.gif" class="bluing"></div>
                    <img :src="cardPoolUrl" class="real-img pool_img" :class="{ loaded: poolCreateVisible }" />
                  </div>
                <div v-show="cardVisible" class="card_kuang">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%;">
                    <el-col :span="24">
                      <img v-for="(card,key,index) in drawCardDataArr" class="card_img" :src='card.cardHeadRoleUrl'  @click="toRoleDetaile(card.cardRoleID)" />   
                    </el-col> 
                  </el-row>
                </div>
                <div v-show="cardsVisible" class="cards_kuang">
                  <el-row type="flex" justify="center" align="middle" style="height: 100%;">
                    <el-col :span="2"></el-col> 
                    <el-col v-for="(card,key,index) in drawCardDataTopArr"  :span="4" class="card_bor">
                      <img class="card_img" :src='card.cardHeadRoleUrl' @click="toRoleDetaile(card.cardRoleID)"/> 
                      <!-- <img class="card_img" src='https://www.cljj.wiki/equipment/XYJRG.png' @click="toRoleDetaile(card.cardRoleID)"/>  -->
                    </el-col>
                    <el-col :span="2"></el-col> 
                    <el-col :span="2"></el-col> 
                    <el-col v-for="(card,key,index) in drawCardDataBottomArr"  :span="4" class="card_bor">
                      <img class="card_img" :src='card.cardHeadRoleUrl' @click="toRoleDetaile(card.cardRoleID)"/> 
                      <!-- <img class="card_img" src='https://www.cljj.wiki/card/gq.jpg' @click="toRoleDetaile(card.cardRoleID)"/>   -->
                    </el-col>
                    <el-col :span="2"></el-col> 
                  </el-row>
                </div>
              </div>
              <div class="pool_under">
                <el-button class="xqgl-btn" @click="confirmCard(null)" ></el-button>
                <el-button class="draw-btn" @click="submitDraw(1)" :disabled="btnDrawEnable" ></el-button>
                <el-button class="draw-btn10"  @click="submitDraw(10)" :disabled="btnDrawEnable"></el-button>
              </div>
          </el-col>
          <el-col :span="5" style="padding-left: 10px;"> 
            <div class="cksj">
              <div class="start-card-title">     
                <span class="start-child">抽卡数据<span v-if="selectdCardType == 2" class="equipmentSize">(装备池暂未计入数据)</span></span>
              </div>
              <div class="start-card-detail">
                <p>总抽数：{{ totalDrawNum }}</p>
                <p>SSR获取：{{ fiveStarNum }}</p>
                <p>SSR概率：{{ fiveStarRate }}</p>
                <p>消耗星石：{{ drawMony }}</p>
              </div>
            </div>

            <div class="cksj">
              <div class="start-card-title">     
                <span class="start-child">SSR获取详情 ↓ <span v-if="selectdCardType == 2"  class="equipmentSize">(装备池暂未计入数据)</span></span>
              </div>
              <div class="start-card-detail detail-Arr">
                <ul v-if="fiveGetDetailArr != null">
                  <li v-for="(value,key,index) in fiveGetDetailArr">
                    {{value}}         
                  </li>
                </ul>
              </div>
            </div>

          </el-col>
            <!-- <div class="card_up"></div> -->
        </el-row>
        <el-row>
          <el-col :span="20" > 
          </el-col>
          <el-col :span="4" style="color: blue;margin-top: 4px;"> 注：现苍蓝祈愿系统还在演算卡池UP数据中，且仅以目前官方公布概率进行模拟，仅供参考</el-col>
        </el-row>
      </div>  
    </div>

    <!-- 详情概率弹窗 -->
    <n-modal
    v-model:show="visibleCardDialog"
    preset="dialog"
    :show-icon="false"
    title="详细概率"
    style="width: 770px;padding-bottom: 14px;"
  >     
    <div class="create-dialog"> 
      <p class="name-title">{{ cardUpDetailTitle }}： </p>
        <p class="bm-text">{{ cardUpDetailText }} </p>
      <p class="name-title">详细概率：</p> 
      <div class="allUpDetail">
        <p v-for="(value,key,index) in cardUpDetailAllArr" class="card-text">{{value}}</p>
      </div>
    </div>
  </n-modal>

  <!-- 历届卡池信息 -->
  <n-modal
    v-model:show="visibleHistoryCardDialog"
    preset="dialog"
    :show-icon="false"
    title="历届卡池"
    style="width: 770px;padding-bottom: 14px;"
  >     
    <div class="create-dialog"> 
      <p class="bm-text">特别鸣谢【苍蓝16区玩家-闪耀的橘子】所提供的历届卡池数据 </p>
      <p class="name-title">【UP时间】—— 【UP卡池】：</p> 
      <div class="allUpDetail">
        <p v-for="(value,key,index) in historyData" class="card-text">{{value.cardPoolDesc}} —— {{value.cardUpDetailTitle}}</p>
      </div>
    </div>
  </n-modal>

  </g-loading>

</template>

<script lang='ts'>
import { defineComponent, ref, onMounted, nextTick, computed,reactive,toRefs  } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useMessage } from 'naive-ui'
import { ProjectGroup, ProjectTemplate } from '@/domains/project'
import { getProjects, createProject } from '@/api/project'
import { getSysTemplates } from '@/api/templates'
import { scrollToLeft } from '@/utils/animation'
import { IconArrowLeft, IconArrowRight, IconBack, IconPlus } from '@/icons'
import { cardPoolList,drawCard } from '@/api/user'
import { da, el } from 'date-fns/locale'
import Particles from '@/components/particles/index.vue'
import * as echarts from 'echarts'
import chinaJSON from '@/assets/json/china.json'
import { encrypt,decrypt } from '@/utils/util'

export default defineComponent({
  name: 'CardPoolScreen',
  components: {
    IconArrowLeft,
    IconArrowRight,
    IconBack,
    IconPlus,
    "particles":Particles
  },
  setup() {
    const nMessage = useMessage()
    const loading = ref(true)
    const templates = ref<ProjectTemplate[]>([])
    const equipArr = ref([])
    const equipEntryArr = ref([])
    const poolVisible = ref(true)
    const ingVisible = ref(false)
    const cardVisible = ref(false)
    const cardsVisible = ref(false)
    const totalDrawNum = ref(0)
    const fiveStarNum = ref(0)
    const fiveStarRate = ref('')
    const drawMony = ref(0)
    const fiveGetDetailArr = ref([''])
    const visibleCardDialog = ref(false)
    const visibleHistoryCardDialog = ref(false)
    // 卡池动态数据
    const cardUpMap = new Map();
    const cardPoolUrl = ref('')
    const cardUpDetailTitle = ref('')
    const cardUpDetailText = ref('')
    const cardUpDetailAllArr = ref([])
    const poolId = ref(0)
    const selectdCardType = ref(0)

    const drawCardDataArr = ref([])
    const drawCardDataTopArr = ref([])
    const drawCardDataBottomArr = ref([])
    const isSelectdUpChange = ref(false)
    const btnDrawEnable = ref(false)

    const poolCreateVisible = ref(false)
    const poolIngVisible = ref(true)
    const upCreateVisible = ref(false)
    const visiblePreviewDialog = ref(true)
    const projectName = ref('')
    const bigUrlImg = ref('')
    const currentPage = ref(0)
    const name = ref('')
    const stAttribute = ref('')
    const attribute = ref('')
    const template = ref<Partial<ProjectTemplate> | null>({})
    const groupId = ref(0)
    const groups = ref([new ProjectGroup(0, '未分组')])
    const saveLoading = ref(false)
    const router = useRouter()
    const routes = useRoute()

    const scrollRef = ref<any>(null)
    const groupOpts = computed(() => {
      return groups.value.map(m => ({ value: m.id, label: m.name }))
    })
    const chinaMap = ref()

   const state = reactive({
      loadingSt: false,
      tableHeight:700,
      tableRef:null,
      tableData: [],
      historyData:[],
      falg:false
    })

    onMounted(async () => {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
       // 移动端处理
       if(flag != null ){
          router.push({
            name: 'MyError'
          })
       }

      const res = await getSysTemplates()
      loading.value = false
      templates.value = res.data
      getCardPool(null);

    })

     // 获取卡池信息
     const getCardPool = (id) => {
      // 展示有效的卡池信息
      cardPoolList(id,1).then(res=>{ 
           let data = res.data.data;  
           state.tableData = data;
          //  console.log(state.tableData)
           // 默认进入加载选第一个
           poolId.value = data[0].id;
           isSelectdUpChange.value = data[0].id;
           cardPoolUrl.value = data[0].cardPoolUrl;
           cardUpDetailTitle.value = data[0].cardUpDetailTitle;
           cardUpDetailText.value = data[0].cardUpDetailText;
           cardUpDetailAllArr.value = data[0].cardUpDetailAllArr;
           selectdCardType.value =  data[0].cardType;
           // 组装map数据
           for (let i = 0; i<data.length;i++) {
            cardUpMap.set(data[i].id,data[i]);
           }
          // 模糊渲染
          tranToCardPool();
          // tranToCardUp(data);
      })
      // 展示历届卡池信息
      cardPoolList(id,null).then(res=>{ 
        let historyDa = res.data.data;  
        state.historyData = historyDa;
      })

    }

    // 卡池模糊渲染调度
    const tranToCardPool = () => {
      const img = new Image();
            img.src = cardPoolUrl.value;
            img.onload = () => {
              poolCreateVisible.value = true;
            };
    }

    // 卡池模糊渲染调度
    const tranToCardUp = (data) => {
      const img = new Image();
            img.src = data[0].cardUpUrl;
            // console.log(img.src)
            img.onload = () => {
              upCreateVisible.value = true;
            };
    }

    // 抽卡
    const submitDraw = (num) => {
      let cardType = selectdCardType.value;
      // 按钮置灰（不可连续点）
      btnDrawEnable.value = true;
      // 展示对应数据
      if( num == 1 ){
        cardVisible.value = true;
        cardsVisible.value = false;
        if(cardType == 1){
          drawMony.value = drawMony.value + 200;
        }
      }else if( num == 10){
        cardsVisible.value = true;
        cardVisible.value = false;
        if(cardType == 1){
          drawMony.value = drawMony.value + 1980;
        }
      }
      poolVisible.value = false;
      // 调度接口抽卡
      let drawType = num;
      drawCard(poolId.value,drawType).then(res=>{ 
           // 接口响应按钮可以再点
           btnDrawEnable.value = false;
           let drawCardData = res.data.data; 
          //  console.log(drawCardData)
           if( num == 1 ){
            drawCardDataArr.value = drawCardData; 
           }else if( num == 10 ){
              // 卡池分成两部分插入
            drawCardDataTopArr.value =  drawCardData.slice(0,5);
            drawCardDataBottomArr.value =  drawCardData.slice(5,10);
           }
          // 本地数据相加
          if(cardType == 1){
            totalDrawNum.value = totalDrawNum.value + num;
          }
          // 头部插入
          for (let i = 0; i<drawCardData.length;i++) {
            if(drawCardData[i].cardStar == 5){
              nMessage.success('恭喜抽中SSR【'+drawCardData[i].cardRoleName+'】');
              fiveGetDetailArr.value.unshift("・ "+drawCardData[i].cardRoleName+"* 1 ");
              fiveStarNum.value = fiveStarNum.value + 1 ;
              fiveStarRate.value = (Math.round(fiveStarNum.value/totalDrawNum.value * 10000) /100.00) + '%';
            }
          }
          if(fiveGetDetailArr.value.length > 10){
            let delLength = fiveGetDetailArr.value.length - 10;
            for(let i = 0 ; i < delLength ; i++){
              // 尾部删除一个元素
              fiveGetDetailArr.value.pop();
            }
            fiveGetDetailArr.value.push(".....")
          }
          
      })
     
    }

    // 选定卡池
    const showUpPool = (id) => {
      poolCreateVisible.value = false;
      isSelectdUpChange.value = id;
      poolId.value = id;
      selectdCardType.value = cardUpMap.get(id).cardType;
      cardPoolUrl.value = cardUpMap.get(id).cardPoolUrl;
      cardUpDetailTitle.value = cardUpMap.get(id).cardUpDetailTitle;
      cardUpDetailText.value = cardUpMap.get(id).cardUpDetailText;
      cardUpDetailAllArr.value = cardUpMap.get(id).cardUpDetailAllArr;
      poolVisible.value = true;
      cardVisible.value = false;
      cardsVisible.value = false;
      // 模糊渲染卡池
      tranToCardPool();
    }

    // 详细概率
    const confirmCard = (type: String | null) => {
      let types = type as string;
      visibleCardDialog.value = true
    }

   // 详细概率
    const confirmHistoryCard = (type: String | null) => {
      let types = type as string;
      visibleHistoryCardDialog.value = true
    }

      // 跳转人物详情
  const toRoleDetaile = (id) => {
    if(selectdCardType.value == 1){
      const param = encrypt(({
        id: id,
        currentPage:1,
        name : '',
        attribute : '',
        serverResourceType : ''
      }))
      if (id) {
          router.push({
            name: 'CreateScreen',
            query: {
              param:param
            },
          })
      } 
    }
  }


   
 
    return {
      templates,
      poolVisible,
      ingVisible,
      cardVisible,
      cardsVisible,
      poolCreateVisible,
      visiblePreviewDialog,
      projectName,
      template,
      groupId,
      groups,
      groupOpts,
      saveLoading,
      loading,
      scrollRef,
      equipArr,
      bigUrlImg,
      equipEntryArr,
      stAttribute,
      chinaMap,
      totalDrawNum,
      fiveStarNum,
      fiveStarRate,
      fiveGetDetailArr,
      drawMony,
      visibleCardDialog,
      visibleHistoryCardDialog,
      cardUpDetailTitle,
      cardUpDetailText,
      cardUpDetailAllArr,
      cardPoolUrl,
      drawCardDataArr,
      drawCardDataTopArr,
      drawCardDataBottomArr,
      isSelectdUpChange,
      selectdCardType,
      btnDrawEnable,
      upCreateVisible,
      confirmCard,
      confirmHistoryCard,
      submitDraw,
      showUpPool,
      toRoleDetaile,
      ...toRefs(state)

    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/styles/mixins/function.scss";

@font-face {
  font-family: Orbitron-Bold;
  src: url('@/styles/fonts/orbitron-bold.ttf') format('truetype');
}

@mixin cover-img {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #131e2d;
  background-image: url(com-cdn('datav/datav-vue-logo.png'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  filter: grayscale(1);
  opacity: 0.36;
}

.create-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: rgb(0 51 125 / 7%);
  background: #101129;

  margin: 0;
  padding: 0;
   user-select: none;

  .top-bar {
    height: 50px;
    width: 100%;
    position: relative;
    z-index: 2;

    &::before {
      content: ' ';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 20px;
      width: 100%;
      background: #151b22;
    }

    .right-bar {
      position: absolute;
      left: 150px;
      top: 20px;
      height: 5px;
      width: 100%;
      border-top: var(--datav-border-primary);
      border-left: 2px solid var(--datav-main-color);
      background: rgb(55 126 255 / 4%);
      border-top-left-radius: 5px;
      transform: skewX(-45deg);
      box-shadow: 0 5px 28px 0 rgb(55 126 255 / 28%);
    }

    .left-bar {
      position: absolute;
      left: 0;
      top: 24px;
      height: 25px;
      width: 138px;
      border-right: 2px solid var(--datav-main-color);
      border-bottom: var(--datav-border-primary);
      transform: skewX(-45deg);
      border-bottom-right-radius: 5px;
      box-shadow: 0 5px 28px 0 rgb(55 126 255 / 28%);
    }

    .return-btn {
      position: absolute;
      left: -31px;
      top: 0;
      width: 180px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #151b22;
      cursor: pointer;
      transform: skewX(-45deg);
      border-bottom-right-radius: 5px;
      

      .return-text {
        display: inline-block;
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
        transform: skewX(45deg);
        transition: 0.2s;

        &:hover {
          color: var(--datav-main-color);
        }
      }

      .return-icon {
        margin-right: 5px;
      }
    }
  }

  .creator-wp {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px;

    .template-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: scroll;
      color: #fff;
      font-size: 12px;
      margin: 0 -16px;
      padding-bottom: 100px;
      padding-top: 60px;

      .template-item {
        width: 258px;
        height: 184px;
        box-shadow: var(--datav-shadow);
        border: var(--datav-border);
        margin: 16px;
        transition: 0.2s;
        outline: 1px solid transparent;
        cursor: default;

        .template-image {
          width: 100%;
          height: 146px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: 0.2s;
          position: relative;
        }

        .template-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;
          height: 36px;
          background: var(--datav-bgcolor-2);
          transition: 0.2s;
        }

        &.--blank {
          position: relative;
          outline: var(--datav-border-primary);

          .template-image {
            box-shadow: inset 0 0 46px 0 rgb(136 215 255 / 29%);
          }

          .template-info {
            border-top: var(--datav-border-primary);
            justify-content: center;
            font-size: 14px;
          }
        }
      }

      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;

        &::after {
          @include cover-img;
        }
      }

      .template-mask {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgb(0 0 0 / 50%);
        transition: 0.2s;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        opacity: 0;
        font-weight: 400;

        .create-btn {
          width: 112px;
          padding: 0 5px;
        }

        .preview-btn {
          margin-top: 10px;
          width: 112px;
          padding: 0 5px;
          margin-left: 0;
        }
      }

      .template-item:hover {
        outline: var(--datav-border-primary);

        .template-mask {
          pointer-events: all;
          opacity: 1;
        }
      }

      .template-name {
        font-size: 12px;
      }

      .template-size {
        color: #999;
        text-align: right;
        font-family: Orbitron-Bold, PingFangSC-Medium, "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif;
      }

      .template-item-placehoder {
        width: 258px;
        margin: 16px;
      }
    }
  }
}

.create-dialog {
  .required {
    display: inline-block;
    margin-right: 6px;
    color: var(--datav-red-color);
  }

  .template-desc {
    margin-bottom: 20px;
    opacity: 0.8;
    overflow: hidden;
    -webkit-line-clamp: 3;
    display: box;
    -webkit-box-orient: vertical;
  }

  .name-title {
    margin-bottom: 10px;
    line-height: 20px;
    font-style: italic;
  }

  .name-input {
    margin-bottom: 15px;
    height: 28px;
    line-height: 26px;
    flex-wrap: wrap;
  }

  // 禁止复制文本
  user-select: none;
}

@mixin slider-blur($placement: left, $angle: -90deg) {
  content: ' ';
  position: absolute;
  top: 0;
  #{$placement}: 0;
  background-image:
    linear-gradient(
      #{$angle},
      rgb(0 0 0 / 0%) 64%,
      #303640 100%
    );
  width: 82px;
  height: 96px;
  pointer-events: none;
  z-index: 1;
}

.preview-dialog {
  margin-top: -10px;
  margin-bottom: -40px;

  .preview-list {
    width: 895px;
    height: 150px;
    margin-left: -20px;
    background: #303640;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .template-list-title {
      font-size: 12px;
      margin: 0 0 15px 30px;
    }
  }

  .blur-wp {
    position: relative;
    margin: 0 24px;

    &::before {
      @include slider-blur();
    }

    &::after {
      @include slider-blur(right, 90deg);
    }
  }

  .scroll-wp {
    white-space: nowrap;
    overflow-x: scroll;
    padding-bottom: 8px;

    &::-webkit-scrollbar-thumb {
      background: var(--datav-main-color);
      border-radius: 5px;
      border: none;
    }
  }

  .preview-wp {
    position: relative;
    font-size: 0;
    width: 137px;
    height: 97px;
    overflow: hidden;
    display: inline-block;
    margin: 0 6px;
    cursor: pointer;
    border: 1px solid rgb(123 123 123 / 25%);
    transition: 0.2s;

    .preview-small-img {
      display: block;
      width: 100%;
      height: 76px;
      object-fit: cover;
      position: relative;

      &::after {
        @include cover-img;
      }
    }

    .preview-screen-name {
      font-size: 12px;
      line-height: 19px;
      background: var(--datav-bgcolor-2);
      padding: 0 5px;
      font-weight: 300;
    }

    &:hover,
    &.selected {
      border-color: var(--datav-main-color);
    }
  }

  .preview-gif {
    height: 420px;
    display: flex;
    padding: 20px 10px 50px;

    .gif-wp {
      width: 610px;
      position: relative;

      .snapshot-gif {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        border: var(--datav-border);
        box-shadow: var(--datav-shadow);

        &::after {
          @include cover-img();
        }
      }

      .next-icon,
      .prev-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 5px;
        border-radius: 50%;
        height: 26px;
        width: 26px;
        margin: 10px;
        font-weight: 600;
        background: rgb(255 255 255 / 20%);
        color: rgb(255 255 255 / 80%);
        cursor: pointer;
        transition: 0.2s;

        &:hover {
          color: #fff;
          background: rgb(255 255 255 / 30%);
        }
      }

      .next-icon {
        right: 0;
      }
    }

    .preview-create {
      flex: 1;
      overflow: hidden;
      padding-left: 20px;
    }
  }
}

.preview-create-btn {
  margin-top: 30px;

  .next-icon {
    font-size: 12px;
  }
}
 .data {
    display: flex;
    margin-bottom: 50px;
  }
  .data .data-item {
    flex: 1;
    margin: 0 10px;
  }
  .el-table {
    border: 1px solid #EBEEF5;
    border-bottom: none;
  }
  .has-gutter th {
    border-right: 1px solid #EBEEF5;
  }

  .has-gutter th:last-child {
    border-right: none;
  }
 .data {
    display: flex;
    margin-bottom: 50px;
  }
  .data .data-item {
    flex: 1;
    margin: 0 10px;
  }
  .el-table {
    border: 1px solid #EBEEF5;
    border-bottom: none;
  }
  .has-gutter th {
    border-right: 1px solid #EBEEF5;
  }

  .has-gutter th:last-child {
    border-right: none;
  }
  .el-table__row td {
    border-right: 1px solid #EBEEF5;
  }
  .el-table__row td:last-child {
    border-right: none;
  }

  .img-wrap {
      height: 20vw;
      margin-left: 4vw;
      margin-top: 2vw;
      // outline: 1px solid #66f;
  //  box-shadow: 0px 0px 10px #ee0a24 inset, 0px 0px 0px 15px #fff inset, 0px 0px 10px 15px #07c160 inset;
    }
    .img-wrap img {
      height: 100%;
      //蓝色背景效果
      box-shadow: 0px 0px 10px #FFD700;
      background: linear-gradient(#FFD700,#FFD700) left top,
      linear-gradient(hsl(131, 49%, 53%),#FFD700) left bottom,
      linear-gradient(#FFD700,#FFD700) right top,
      linear-gradient(#FFD700,#FFD700) right bottom;
      background-size: 4px 4px;
      background-repeat: no-repeat;

    }
    .grid-styel{
      height: 20vw;
      color: white
     
    }

    .grid-styels{
      height: 20vw;
      color: 		#D00000
    }    
   .skill-card-title {
      height: 4vw;
      // width: 45vw;
      // outline: 1px solid rgb(0, 0, 2);
      // margin-left: 4vw;
      margin-top: 2vw;
       display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      // background-color: #101129;
      // color: rgb(238, 11, 11);

    }

    .title-child{
     font-weight:bold;
     font-size:1vw
    }
    
    .skill-card-detail {
      height: 16vw;
      // width: 45vw;
      // outline: 1px solid rgb(0, 0, 2);
      // margin-left: 4vw;
      font-size:1vw;
      // padding: 2vw;
      // background-color: tan;
      // background-image: url('http://124.221.197.189:8088/DSJ.png');
      // background-image: url('https://www.cljj.wiki/DSJ.png');
      // background-size: 100% 100%;           
			// background-repeat: no-repeat;
    }

    .skill-card-detail  img {
      height: 100%;
      //蓝色背景效果
      box-shadow: 0px 0px 10px #FFD700;
      background: linear-gradient(#FFD700,#FFD700) left top,
      linear-gradient(#FFD700,#FFD700) left bottom,
      linear-gradient(#FFD700,#FFD700) right top,
      linear-gradient(#FFD700,#FFD700) right bottom;
      background-size: 4px 4px;
      background-repeat: no-repeat;
    }

    .equip-1 img {
      // height: 100%;
      margin-top: 1vw;
      position: absolute;
      //蓝色背景效果
      box-shadow: 0px 0px 10px #FFD700;
      background: linear-gradient(#FFD700,#FFD700) left top,
      linear-gradient(#FFD700,#FFD700) left bottom,
      linear-gradient(#FFD700,#FFD700) right top,
      linear-gradient(#FFD700,#FFD700) right bottom;
      background-size: 4px 4px;
      background-repeat: no-repeat;
    }

    p{ line-height:20px} 

    .skill-card-detail p{ 
      margin:1vw auto;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 1.2vw;
      } 

    .skill-card-detail p:hover {
      overflow: visible;
      white-space: normal;
    }

// 星盘
   .start-card-title {
      height: 10%;
      // width: 18vw;
      // outline: 1px solid rgb(0, 0, 2);
      margin: 5%;
      // margin-top: 1vw;
       display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .start-child{
     font-weight:bold;
     font-size:1vw
    }
    
    .start-card-detail {
      // height: 70%;
    //  width: 18vw;
      // outline: 1px solid rgb(0, 0, 2);
      // margin-left: 1vw;
      font-size:0.9vw;
      padding: 5%;
      //  background-image: url('http://124.221.197.189:8088/DSJ.png');
       background-image: url('https://www.cljj.wiki/DSJ.png');
      background-size: 100% 100%;           
			background-repeat: no-repeat;
    }
    

    .start-card-detail p{ margin:5% auto} 



    // 魂装
   .soul-card-title {
      height: 4vw;
      width: 61.5vw;
      // outline: 1px solid rgb(0, 0, 2);
      margin-left: 4vw;
      margin-top: 2vw;
       display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .soul-child{
     font-weight:bold;
     font-size:1vw
    }
    
    .soul-card-detail {
      height: 16vw;
      width: 61.5vw;
      // outline: 1px solid rgb(0, 0, 2);
      margin-left: 4vw;
      font-size:1vw;
      padding: 2vw;
      line-height: 0vw;
      //  background-image: url('http://124.221.197.189:8088/DSJ.png');
       background-image: url('https://www.cljj.wiki/DSJ.png');
      background-size: 100% 100%;           
			background-repeat: no-repeat;
    }

    .soul-card-detail p{ margin:1vw auto} 

    .soul-card-detail p{ 
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 1.1vw;
    } 
    .soul-card-detail p:hover {
      overflow: visible;
      white-space: normal;
    }

    .soul-attack{ 
      display:inline;
      margin-left: 10vw;
      } 
    .soul-blood{ 
      display:inline;
      margin-left: 10vw;
    } 
     .hz-cl{ 
      // display:inline;
      // margin-left: 15vw;
      // position: relative;
      // left: 15vw;
      position: relative;
      left: 47vw;
    } 

    // 点评
    .appraise-card-title {
      height: 4vw;
      width: 27vw;
      // outline: 1px solid rgb(0, 0, 2);
      margin-left: 2vw;
      margin-top: 2vw;
       display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .appraise-child{
     font-weight:bold;
     font-size:1vw
    }
    
    .appraise-card-detail {
      height: 16vw;
      width: 27vw;
      // outline: 1px solid rgb(0, 0, 2);
      margin-left: 2vw;
      font-size:0.9vw;
      line-height: 1.1vw;
      padding: 2vw;
      // background-image: url('http://124.221.197.189:8088/DSJ.png');
       background-image: url('https://www.cljj.wiki/DSJ.png');
      background-size: 100% 100%;           
			background-repeat: no-repeat;
    }
   .appraise-card-detail p{ margin:1vw auto} 


    .background-detail{
      z-index: 1;
      // // position: absolute;
      // width: 100%;
      // height: 100%;
      // background-size: cover;
      // background-position: center;
    //  opacity: 0.9;
    }
    .text-hh{
      white-space: pre-wrap;
      word-break: break-all;
      word-wrap: break-word;
    }

    .bm-text{
      color: #5599FF ;
      background: var(--datav-gui-component-bgcolor);
      line-height: 20px;
      padding: 2px 4px;
      font-size: 13px;
      margin-bottom: 1vw
    }

    .card-text{
      color: #5599FF ;
      background: var(--datav-gui-component-bgcolor);
      line-height: 20px;
      padding: 2px 4px;
      font-size: 13px;
      margin-bottom: 1px
    }

    .line-h{
      line-height: 1.1vw;
    }

    .soul-as-top{
      position: absolute;
      width: 100%;
      height: 1vw;
    }


// ----

   .team-card-title {
      height: 4vw;
      width: 45vw;
      margin-left: 4vw;
      margin-top: 2vw;
       display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .team-card-detail {
      height: 16vw;
      width: 45vw;
      margin-left: 4vw;
      font-size:1vw;
      padding: 2vw;
    }

    .st-title{
      font-weight: bold;
      font-size: 1.5vw;
      color: red;
      // margin-top: 2vw
    }

    .data-resoure{
      color: yellow;
      margin-left:1.5vw
    }

    .entrySt{
      height: 10vw;
    }

    .entryEl{
      padding: 3px;
    }

    .tx-cl {
      height: 100%;
      // 蓝色背景效果
      // box-shadow: 0px 0px 10px #0084ff;
      // background: linear-gradient(#0084ff,#0084ff) left top,
      // linear-gradient(#0084ff,#0084ff) left bottom,
      // linear-gradient(#0084ff,#0084ff) right top,
      // linear-gradient(#0084ff,#0084ff) right bottom;
      background-size: 4px 4px;
      background-repeat: no-repeat;
      border-radius: 50%;
    }

    .up-change:hover{
      // background: rgb(184, 224, 250);
      // border: 1px solid #0084ff;

      cursor: pointer;     
      box-shadow: 0px 0px 4px #FFD700;
      border: 2px solid #FFD700;
    }

    .selectdUpChange{
      box-shadow: 0px 0px 20px #FFD700;
      background: linear-gradient(#FFD700,#FFD700) left top,
      linear-gradient(#FFD700,#FFD700) left bottom,
      linear-gradient(#FFD700,#FFD700) right top,
      linear-gradient(#FFD700,#FFD700) right bottom;
      background-size: 4px 4px;
      background-repeat: no-repeat;
       border: 2px solid #FFD700;
    }

    .entrySt{
      cursor: pointer;     
    }
    
    .entrySt:hover{
      background: rgb(184, 224, 250);
      border: 1px solid #0ee06c;
    }

    .-container {
      min-height: 100%;
    }

    
  .tx-cl:hover {
    background: #ffffff;
    border: 1px solid white;
  }

  .order-container {
    min-height: 100%;
    margin-top:1vw;
  }

  .cl-nd {
    font-size: 30px;
    line-height: 50px;
    background-image: -webkit-linear-gradient(left, #f08080, #E6D205 25%, #f08080 50%, #E6D205 75%, #f08080);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
    font-family:楷体;
    font-weight: 700
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    // line-height: 300px;
    text-align: center;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .elcar{
    margin-top: 10px;
  }
  .team_img{
    height: 150px;
  }

  .gl-content{
    padding: 10px;
  }

  .card-up{
    height: calc(100vh - 165px);
    border: solid 1px var(--datav-main-color);
    width: 100%;
    // background: #010111;
  }

  .card_up{
    // width: 100%;
    // height: 140px;
    height: 100%;
    // background-image: url(https://www.cljj.wiki/card/up/topic_up1.jpg);
    // // moz-background-size:100% 100%; 
    // background-size:100% 100%;
  }

  .card_up img {
      width: 99%;
      margin-bottom: 4px;
      //蓝色背景效果
      // box-shadow: 0px 0px 10px #FFD700;
      // background: linear-gradient(#FFD700,#FFD700) left top,
      // linear-gradient(#FFD700,#FFD700) left bottom,
      // linear-gradient(#FFD700,#FFD700) right top,
      // linear-gradient(#FFD700,#FFD700) right bottom;
      // background-size: 4px 4px;
      // background-repeat: no-repeat;
    }

    
  .pool_up{
    text-align: center;
    height: 80%;
    padding: 2px;
    background-image: url('https://www.cljj.wiki/card/pool/kuang_pool.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
    border: 2px solid #0084ff;
  }
  .pool_img{
    // width: 98%;
    padding: 17px 8px 0px 6px;
    // background: rgb(184, 224, 250);
    // border: 1px solid #0084ff;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-object-fit: cover;
     //蓝色背景效果
    box-shadow: 0px 0px 10px #0084ff;
    background: linear-gradient(#0084ff,#0084ff) left top,
    linear-gradient(#0084ff,#0084ff) left bottom,
    linear-gradient(#0084ff,#0084ff) right top,
    linear-gradient(#0084ff,#0084ff) right bottom;
    background-size: 1px;
    background-repeat: no-repeat;
  }

  .ljkc-btn{
    width: 12%;
    height: 30%;
    // background: url('https://www.cljj.wiki/card/pool/xqgl.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
  }

  .ljkc:hover{
    // 悬浮高亮变大
    box-shadow: 0px 0px 4px #0084ff;
    border: 1px solid #0084ff;
  }

  
  .xqgl-btn{
    width: 12%;
    height: 30%;
    background: url('https://www.cljj.wiki/card/pool/xqgl.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
  }

  .xqgl-btn:hover{
    // 悬浮高亮变大
    box-shadow: 0px 0px 4px #0084ff;
    border: 1px solid #0084ff;
  }
  
  .draw-btn{
    width: 18%;
    height: 48%;
    background: url('https://www.cljj.wiki/card/pool/draw_btn.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
  }

  .draw-btn10{
    width: 18%;
    height: 48%;
    background: url('https://www.cljj.wiki/card/pool/draw_btn10.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
  }

  .draw-btn:hover{
    // width: 18%;
    // height: 48%;
    background: url('https://www.cljj.wiki/card/pool/draw_btn.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
    // 悬浮高亮变大
    box-shadow: 0px 0px 4px #FFD700;
    border: 2px solid #FFD700;
  }

  .draw-btn10:hover{
    // width: 18%;
    // height: 48%;
    background: url('https://www.cljj.wiki/card/pool/draw_btn10.jpg');
    background-size: 100% 100%;           
		background-repeat: no-repeat;
    // 悬浮高亮变大
    box-shadow: 0px 0px 4px #FFD700;
    border: 2px solid #FFD700;
  }

  .pool_under{
    padding: 1%;
    height: 20%;
    text-align: right;
  }

  .card_kuang{
    // padding-top: 20%;
    height: 100%;
  }
  .cards_kuang{
      // padding: 12% 3%;
      height: 100%;
      padding: 12% 0;
  }
  .card_bor{
      // background: rgb(184, 224, 250);
      // border: 1px solid #0084ff;
      // width: 10%;
      padding: 10px;
      // margin: 7px;
    }

  .card_img{
      // background: rgb(184, 224, 250);
      // border: 1px solid #0084ff;
      // padding: 1px;
      cursor: pointer;
        // 悬浮高亮变大
      box-shadow: 0px 0px 2px #0084ff;
      border: 1px solid #0084ff;
  }

  .card_img:hover{
    // background: rgb(250, 239, 184);
    border: 2px solid #ffd700;
    
    // box-shadow: 0px 0px 2px #FFD700 !important;
    // background: linear-gradient(#FFD700,#FFD700) left top,
    // linear-gradient(#FFD700,#FFD700) left bottom,
    // linear-gradient(#FFD700,#FFD700) right top,
    // linear-gradient(#FFD700,#FFD700) right bottom !important;
    // background-size: 4px 4px !important;
    // background-repeat: no-repeat;
  }

  .cards_kuang img {
      // height: 100%;
      //蓝色背景效果
      box-shadow: 0px 0px 10px #0084ff;
      background: linear-gradient(#0084ff,#0084ff) left top,
      linear-gradient(#0084ff,#0084ff) left bottom,
      linear-gradient(#0084ff,#0084ff) right top,
      linear-gradient(#0084ff,#0084ff) right bottom;
      background-size: 1px;
      background-repeat: no-repeat;
      width: 100%;
    }

    .card_kuang img {
      // height: 100%;
      // //蓝色背景效果
      box-shadow: 0px 0px 10px #0084ff;
      background: linear-gradient(#0084ff,#0084ff) left top,
      linear-gradient(#0084ff,#0084ff) left bottom,
      linear-gradient(#0084ff,#0084ff) right top,
      linear-gradient(#0084ff,#0084ff) right bottom;
      background-size: 1px;
      background-repeat: no-repeat;
      width: 15%;
    }

    .detail-Arr li{ 
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } 

    .detail-Arr li:hover {
      overflow: visible;
      white-space: normal;
    }
    
    .allUpDetail{
      height: 500px;
      overflow-x: auto;
    }

    .equipmentSize{
      font-size: 1px;
    }

    .cksj{
      height: 40%;
      color: white
    }

    // 卡池模糊css
    .blur-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .blur-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // background-image: url("http://images.h-ui.net/icon/detail/loading/086.gif");
      background-size: cover;
      background-position: center;
      // filter: blur(20px);
      z-index: -1;
      display: flex;
      align-items: center; /* 垂直居中 */
    }
    .bluing{
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }
    .real-img {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
    }

    .real-img.loaded {
      opacity: 1;
    }

    // up角色模糊过渡css
    .blur-container-up {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .blur-img-up {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // background-image: url(path/to/image.jpg);
      background-size: cover;
      background-position: center;
      filter: blur(20px);
      z-index: -1;
    }
    .real-img-up {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease-in-out;
    }

    .real-img-up.loaded {
      opacity: 1;
    }

    .history-cardPool{
      font-size: 14px;
      background-image: -webkit-linear-gradient(left, #f08080, #E6D205 25%, #f08080 50%, #E6D205 75%, #f08080);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 4s infinite linear;
      font-family:楷体;
      font-weight: 700;
      cursor: pointer;
    }

    

</style>
